<template>
	<view>
		<!-- #ifdef MP-WEIXIN -->
		<Navbar title="个人信息" />
		<!-- #endif -->


		<view style="padding: 0 30rpx;">
			<u-form :model="form" ref="uForm" labelWidth="130rpx" labelAlign="left">
				<u-form-item label="头像" prop="avatar" borderBottom>
					<view class="item-panel flex-1">
						<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="1" :maxCount="1"
							:previewFullImage="false"></u-upload>
						<view class="ml-20 flex ai-center">
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
				</u-form-item>
				<u-form-item label="昵称" borderBottom>
					<view class="item-panel">
						<u--input v-model="form.nick_name" placeholder="请输入昵称" maxlength="20" border="none"
							inputAlign="right">
						</u--input>
					</view>
				</u-form-item>
			</u-form>
		</view>

		<view class="btn-panel">
			<u-button text="确定" type="primary" :color="mainColor" @click="handleSubmit()"></u-button>
		</view>


	</view>
</template>

<script>
import colorMixins from '@/mixins/colorMixins.js'
import { uploadOssMixins } from '@/mixins/uploadOssMixins.js'
import Navbar from '@/components/navbar/navbar.vue'
import {
  updateUserInfo,
  queryUserInfo
} from '@/api/user.js'

export default {
  components: { Navbar, },
  mixins: [colorMixins, uploadOssMixins],
  data() {
    return {
      form: {
        avatar: '',
        avatar_id: '',
        nick_name: '',
      },
      fileList: [],
    }
  },
  onLoad() {
    this.queryUserInfoFn()
  },
  methods: {
    // 查用户信息
    async queryUserInfoFn() {
      const data = await queryUserInfo()
      this.form = data
      if(data.avatar) {
        this.fileList = [{ url: data.avatar }]
      }
    },

    async handleSubmit() {
      await updateUserInfo({ ...this.form })
      uni.$u.toast('修改成功')
      setTimeout(() => {
        uni.navigateBack()
      }, 1500)
    },

    afterRead(event) {
      const { thumb } = event.file
      const { user_id } = this.form
      this.getFormDataParams(user_id).then(() => {
        this.uploadFile(thumb, res => {
          this.form.avatar = res.data.url
          this.form.avatar_id = res.data.id

          this.fileList = [{ url: res.data.url }]
        })
      })
    },
		
    deletePic(event) {
		  const index = event.index
		  this.form.image = ''
		  this.fileList.splice(index, 1)
    },

  }
}
</script>

<style lang="scss" scoped>
	/deep/ .u-form-item__body {
		padding: 30rpx 0;
	}

	/deep/ .u-form-item__body__right__content__slot {
		align-items: flex-end;
		flex-direction: column;
	}
	
	/deep/ .u-upload__wrap__preview {
		margin: 0 !important;
	}
	
	/deep/ .u-upload__button {
		width: 100rpx !important;
		height: 100rpx !important;
		margin: 0 !important;
	}

	/deep/ .u-upload__wrap__preview__image {
		width: 100rpx !important;
		height: 100rpx !important;
	}

	.item-panel {
		display: flex;
		position: relative;

		.upload-box {
			position: absolute;
			width: 100%;
			height: 100%;
			opacity: 0;
			right: 0;
			top: 0;
		}
	}

	.btn-panel {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 40rpx;
		width: 90%;
		margin: 0 auto;

		/deep/ .u-button {
			font-size: 32rpx;
			font-weight: bold;
		}
	}
</style>
